import React,{useRef} from 'react'
import {useDispatch,useSelector} from "react-redux"
import {add_num,sub_num} from "../api/index"
// import type {  } from 'react-vant';
// import { CheckboxGroupInstance } from '../PropsType'
import { ProductCard ,NavBar,Image,Button,Checkbox,CheckboxGroupInstance } from 'react-vant';
import {useNavigate} from "react-router-dom" 

type Props = {}

const Shopcar = (props: Props) => {
  const ref = useRef<CheckboxGroupInstance>(null)
  // const [checked, setChecked] = React.useState(false)
  const navigate=useNavigate()
    const dispatch=useDispatch()
    const shop_car=useSelector((state:any)=>{
    return state.reducer.shopcardata
    })
    // console.log(shop_car);
    const add=(id:any)=>{
    dispatch(add_num(id))
    
    }
    const sub=(id:any)=>{
      dispatch(sub_num(id))
    }
    const setCheckAll=(e:any,index:number)=>{
    
    
    }
  return (
    <div>
       <NavBar
      title="SHOPCAR"
      leftText="返回"
      rightText="按钮"
      onClickLeft={() =>navigate(-1) }
     
    />
   {
    shop_car&&shop_car.map((item:any,index:number)=>{
     return  <ProductCard
     key={index}
     num={item.num}
     price={item.price}
     desc={item.info}
     title={item.title}
     thumb={
      <div style={{display:"flex",width:"130px"}}>
        <div style={{lineHeight:"100px",paddingRight:"20px"}}> 
        <Checkbox checked={item.flag} onChange={(e)=>setCheckAll(e,index)}/>
       
     
        </div>
          <Image width='100' height='100' src={item.img} lazyload/>
      </div>
      
     }
     footer={
      <>
        <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>add(item.id)}>
         ++
        </Button>
        <Button size="mini" round plain onClick={()=>sub(item.id)}>
          --
        </Button>
      </>
    }
     />
   
    })
   }
   <p>
   <Button type='primary' onClick={() => ref.current?.toggleAll(true)}>
          全选
        </Button>
        <Button type='primary' onClick={() => ref.current?.toggleAll()}>
          反选
    </Button>
   </p>
    </div>
  )
}

export default Shopcar